<template>
  <div class="widget-item-container">
    <a-row
      :key="element.key"
      class="widget-view"
      type="flex"
      :class="{ active: selectWidget?.key === element.key }"
      :gutter="element.options.gutter ?? 0"
      :justify="element.options.justify"
      :align="element.options.align"
    >
      <template v-if="element.options.visibleFlag">
        <template v-if="element.fieldCode === fixedCombinationFieldCode.piInfo">
          <a-col :span="element.options.columns[0].gridLayoutNumber">
            <a-form-item :colon="false" :rules="{ required: true }">
              <template #label>
                {{ element.options.columns[0].name }}
                <a-tooltip>
                  <template #title>找不到专业？请联系机构老师</template>
                  <i
                    class="wentishuoming icpIconfont hover-primary cursor-pointer"
                    style="font-size: 20px; line-height: normal"
                  ></i>
                </a-tooltip>
              </template>
              <a-select :size="config.size" :allow-clear="true" :style="{ width: '100%' }">
                <a-select-option
                  v-for="item of element.options.options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="element.options.columns[1].gridLayoutNumber">
            <a-form-item :colon="false" :rules="{ required: true }">
              <template #label> {{ element.options.columns[1].name }} </template>
              <a-select :size="config.size" :allow-clear="true" :style="{ width: '100%' }">
                <a-select-option
                  v-for="item of element.options.options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="element.options.columns[2].gridLayoutNumber">
            <a-form-item :colon="false" :rules="{ required: true }">
              <template #label> {{ element.options.columns[2].name }} </template>
              <a-input readonly :size="config.size" :style="{ width: '100%' }" :maxlength="200" :allow-clear="true" />
            </a-form-item>
          </a-col>
        </template>
        <template v-else-if="element.fieldCode === fixedCombinationFieldCode.sponsorInfo">
          <a-col :span="element.options.columns[0].gridLayoutNumber">
            <a-form-item :colon="false" :rules="{ required: true }">
              <template #label>
                {{ element.options.columns[0].name }}
                <a-tooltip>
                  <template #title>找不到申办方？请联系客服更新；项目无申办方，请选择N/A</template>
                  <i
                    class="wentishuoming icpIconfont hover-primary cursor-pointer"
                    style="font-size: 20px; line-height: normal"
                  ></i>
                </a-tooltip>
              </template>
              <a-select :size="config.size" :allow-clear="true" :style="{ width: '100%' }">
                <a-select-option
                  v-for="item of element.options.options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="element.options.columns[1].gridLayoutNumber">
            <a-form-item :colon="false">
              <template #label> {{ element.options.columns[1].name }} </template>
              <a-select :size="config.size" :allow-clear="true" :style="{ width: '100%' }">
                <a-select-option
                  v-for="item of element.options.options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="element.options.columns[2].gridLayoutNumber">
            <a-form-item :colon="false">
              <template #label> {{ element.options.columns[2].name }} </template>
              <a-input readonly :size="config.size" :style="{ width: '100%' }" :maxlength="200" :allow-clear="true" />
            </a-form-item>
          </a-col>
        </template>
        <template v-else-if="element.fieldCode === fixedCombinationFieldCode.croInfo">
          <a-col :span="element.options.columns[0].gridLayoutNumber">
            <a-form-item :colon="false">
              <template #label>
                {{ element.options.columns[0].name }}
                <a-tooltip>
                  <template #title>找不到CRO？请联系客服更新</template>
                  <i
                    class="wentishuoming icpIconfont hover-primary cursor-pointer"
                    style="font-size: 20px; line-height: normal"
                  ></i>
                </a-tooltip>
              </template>
              <a-select :size="config.size" :allow-clear="true" :style="{ width: '100%' }">
                <a-select-option
                  v-for="item of element.options.options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="element.options.columns[1].gridLayoutNumber">
            <a-form-item :colon="false">
              <template #label> {{ element.options.columns[1].name }} </template>
              <a-select :size="config.size" :allow-clear="true" :style="{ width: '100%' }">
                <a-select-option
                  v-for="item of element.options.options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="element.options.columns[2].gridLayoutNumber">
            <a-form-item :colon="false">
              <template #label> {{ element.options.columns[2].name }} </template>
              <a-input readonly :size="config.size" :style="{ width: '100%' }" :maxlength="200" :allow-clear="true" />
            </a-form-item>
          </a-col>
        </template>
        <template v-else-if="element.fieldCode === fixedCombinationFieldCode.smoInfo">
          <a-col :span="element.options.columns[0].gridLayoutNumber">
            <a-form-item :colon="false">
              <template #label>
                {{ element.options.columns[0].name }}
                <a-tooltip>
                  <template #title>找不到SMO？请联系客服更新</template>
                  <i
                    class="wentishuoming icpIconfont hover-primary cursor-pointer"
                    style="font-size: 20px; line-height: normal"
                  ></i>
                </a-tooltip>
              </template>
              <a-select :size="config.size" :allow-clear="true" :style="{ width: '100%' }">
                <a-select-option
                  v-for="item of element.options.options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="element.options.columns[1].gridLayoutNumber">
            <a-form-item :colon="false">
              <template #label> {{ element.options.columns[1].name }} </template>
              <a-select :size="config.size" :allow-clear="true" :style="{ width: '100%' }">
                <a-select-option
                  v-for="item of element.options.options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="element.options.columns[2].gridLayoutNumber">
            <a-form-item :colon="false">
              <template #label> {{ element.options.columns[2].name }} </template>
              <a-input readonly :size="config.size" :style="{ width: '100%' }" :maxlength="200" :allow-clear="true" />
            </a-form-item>
          </a-col>
        </template>
        <template v-else-if="element.fieldCode === fixedCombinationFieldCode.thirdCheckInfo">
          <a-col :span="element.options.columns[0].gridLayoutNumber">
            <a-form-item :colon="false">
              <template #label>
                {{ element.options.columns[0].name }}
                <a-tooltip>
                  <template #title>找不到第三方检测单位？请联系客服更新</template>
                  <i
                    class="wentishuoming icpIconfont hover-primary cursor-pointer"
                    style="font-size: 20px; line-height: normal"
                  ></i>
                </a-tooltip>
              </template>
              <a-select :size="config.size" :allow-clear="true" :style="{ width: '100%' }">
                <a-select-option
                  v-for="item of element.options.options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="element.options.columns[1].gridLayoutNumber">
            <a-form-item :colon="false">
              <template #label> {{ element.options.columns[1].name }} </template>
              <a-select :size="config.size" :allow-clear="true" :style="{ width: '100%' }">
                <a-select-option
                  v-for="item of element.options.options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="element.options.columns[2].gridLayoutNumber">
            <a-form-item :colon="false">
              <template #label> {{ element.options.columns[2].name }} </template>
              <a-input readonly :size="config.size" :style="{ width: '100%' }" :maxlength="200" :allow-clear="true" />
            </a-form-item>
          </a-col>
        </template>
      </template>
      <template v-else>
        <div style="width: 100%; text-align: center; border: 1px dashed #ccc; color: #ccc; line-height: 32px">
          隐藏字段
        </div>
      </template>
    </a-row>
    <div v-if="selectWidget?.key === element.key" class="widget-view-action">
      <SvgIcon
        v-if="isConfig() || element.options.allowDeleteFlag === 1"
        name="delete"
        prefix="icon-form"
        color="#fff"
        @click.stop="$emit('delete')"
      />
    </div>
    <div v-if="selectWidget?.key === element.key" class="widget-view-drag">
      <SvgIcon name="move" prefix="icon-form" color="#fff" class="drag-widget" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { WidgetForm } from '@@/enums/customFormEnums'
import { isConfig } from '@@/utils/index'
import { fixedCombinationFieldCode } from '../config/index'

defineProps({
  config: {
    type: Object as PropType<WidgetForm['config']>,
    default: () => ({}),
    required: true
  },
  element: {
    type: Object,
    default: () => ({}),
    required: true
  },
  selectWidget: {
    type: Object,
    default: () => ({}),
    required: true
  }
})

// const emits = defineEmits(['delete'])

defineExpose({})
</script>

<style lang="less"></style>
